<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gravity Brain</title>

  <!-- 离线 Google 字体: Source Sans Pro -->
  <link rel="stylesheet" href="../static/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- 主题样式 -->
  <link rel="stylesheet" href="../static/css/adminlte.min.css">
{#  <script type="text/javascript">
        // 定义一个函数来刷新页面
        function autoRefreshPage() {
            window.location.reload();
        }


        setTimeout(autoRefreshPage, 20000);
  </script>#}
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

  <!-- Preloader -->
  <!--<div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>-->

  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-dark">
    <!-- 左侧导航栏链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index2.html" class="nav-link">系统功能展示</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- 主侧边栏容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌 Logo -->
    <a  class="brand-link">
      <img src="../static/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">重力波大脑</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- 侧边栏菜单 -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- 使用 .nav-icon 类添加图标，
               或使用 font-awesome 或其他任何图标字体库 -->
          <li class="nav-item menu-open">
            <a href="index.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                首页
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="index3.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                气象环境信息
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="kgs.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统知识图谱展示
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="index2.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统功能展示
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                功能交互
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="detect.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>图像受气象干扰影响</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="anoinv.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波反演温度预测</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="generation.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波图像生成</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. 包含页面内容 -->
  <div class="content-wrapper">
    <!-- 内容标题（页面标题） -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">重力波图像分析（Gravity Brain）</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">Gravity Brain</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- 主体内容 -->
    <section class="content">
      <div class="container-fluid">

{#          <div class="row">#}
{#          <div class="col-md-12">#}
{#            <div class="card">#}
{#              <div class="card-body p-0">#}
{#                <table class="table table-striped">#}
{#                  <thead>#}
{#                    <tr>#}
{#                      <th style="width: 15%">数据类型</th>#}
{#                      <th style="width: 35%">时间</th>#}
{#                      <th style="width: 35%">数据值</th>#}
{#                      <th style="width: 15%"></th>#}
{#                    </tr>#}
{#                  </thead>#}
{#                  <tbody>#}
{#                    <tr>#}
{#                      <td>温度一</td>#}
{#                      <td>#}
{#                        <div id="sensortime1"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs">#}
{#                          <div class="progress-bar bg-success" id="sensorline1" style="width: 55%"></div>#}
{#                        </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata1">55%</span></td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td>温度二</td>#}
{#                      <td>#}
{#                        <div id="sensortime2"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs">#}
{#                          <div class="progress-bar bg-success" id="sensorline2" style="width: 70%"></div>#}
{#                        </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata2">70%</span></td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td>相对湿度</td>#}
{#                      <td>#}
{#                        <div id="sensortime3"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs progress-striped active">#}
{#                            <div class="progress-bar bg-success" id="sensorline3" style="width: 30%"></div>#}
{#                            </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata3">55%</span></td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td>噪声</td>#}
{#                      <td>#}
{#                        <div id="sensortime4"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs progress-striped active">#}
{#                          <div class="progress-bar bg-success" id="sensorline4" style="width: 90%"></div>#}
{#                        </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata4">55%</span></td>#}
{#                    </tr>#}
{#                  </tbody>#}
{#                </table>#}
{#              </div>#}
{#              <!-- /.card-body -->#}
{#            </div>#}
{#            <!-- /.card -->#}
{#          </div>#}
{#          <!-- /.col -->#}
{#        </div>#}
{#        <!-- 状态数据 -->#}
{#        <div class="row">#}
{##}
{#                    <div class="col-sm-3 col-6">#}
{#                        <div class="card">#}
{#                            <div class="card-header border-0">#}
{#                                <h3 class="card-title">传感器1温度一</h3>#}
{#                                <div class="card-tools">#}
{#                                    <span class="badge badge-light"><div id="first_sensor_time1"></div></span>#}
{#                                </div>#}
{#                            </div>#}
{##}
{#                            <div class="card-body">#}
{#                                <div id = "first_sensor_first_temperature_chart" style="text-align: left;height: 350px"></div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="col-sm-3 col-6">#}
{#                        <div class="card">#}
{#                            <div class="card-header border-0">#}
{#                                <h3 class="card-title">传感器1温度二</h3>#}
{#                                <div class="card-tools">#}
{#                                    <span class="badge badge-light"><div id="first_sensor_time2"></div></span>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="card-body">#}
{#                                <div id = "first_sensor_second_temperature_chart" style="text-align: left;height: 350px"></div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="col-sm-3 col-6">#}
{#                        <div class="card">#}
{#                            <div class="card-header border-0">#}
{#                                <h3 class="card-title">传感器1相对湿度</h3>#}
{#                                <div class="card-tools">#}
{#                                    <span class="badge badge-light"><div id="first_sensor_time3"></div></span>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="card-body">#}
{#                                <div id = "first_sensor_humidity" style="text-align: left;height: 350px"></div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="col-sm-3 col-6">#}
{#                        <div class="card">#}
{#                            <div class="card-header border-0">#}
{#                                <h3 class="card-title">噪声传感器</h3>#}
{#                                <div class="card-tools">#}
{#                                    <span class="badge badge-light"><div id="noise_sensor_time"></div></span>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="card-body">#}
{#                                <div id = "noise_chart" style="text-align: left;height: 350px"></div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}

{#          <!-- 气象数据块 -->#}
{#          <div class="row">#}
{#              <div class="col-md-12">#}
{#                  <div class="card">#}
{#                      <div class="card-header d-flex justify-content-between">#}
{#                          <h3 class="card-title"  style="font-size:1.8rem;color:#fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)">#}
{#                              气象数据可视化面板</h3>#}
{#                          <div class="timestamp-box">#}
{#                              <i class="fas fa-clock text-info"></i>#}
{#                              <span id="global-timestamp" class="ml-2" style="font-size:1.2rem;color:#fff"></span>#}
{#                          </div>#}
{#                      </div>#}
{#                      <div class="card-body">#}
{#                          <!-- 第一行：温度仪表盘 -->#}
{#                          <div class="row mb-4">#}
{#                              <!-- 外界温度 -->#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body text-center">#}
{#                                          <div id="externalTempGauge" style="height:220px"></div>#}
{#                                          <h5 class="text-muted mt-2">外界温度 (°C)</h5>#}
{#                                          <div class="timestamp-label">#}
{#                                              更新时间：<span id="temp-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 地表温度 -->#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body text-center">#}
{#                                          <div id="surfaceTempGauge" style="height:220px"></div>#}
{#                                          <h5 class="text-muted mt-2">地表温度 (°C)</h5>#}
{#                                          <div class="timestamp-label">#}
{#                                              更新时间：<span id="ts-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{##}
{#                          <!-- 第二行：湿度与风参数 -->#}
{#                          <div class="row mb-4">#}
{#                              <div class="col-md-4">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body text-center">#}
{#                                          <div id="humidityChart" style="height:220px"></div>#}
{#                                          <h5 class="text-muted mt-2">外界湿度 (%)</h5>#}
{#                                          <div class="timestamp-label">#}
{#                                              更新时间：<span id="humidity-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 风参数仪表盘 -->#}
{#                              <div class="col-md-8">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <div class="row">#}
{#                                              <div class="col-md-3 text-center">#}
{#                                                  <div class="wind-dial-container">#}
{#                                                      <div class="wind-direction-arrow" id="windArrow"></div>#}
{#                                                      <canvas id="windDirection"></canvas>#}
{#                                                  </div>#}
{#                                                  <div class="wind-info mt-2">#}
{#                                                      <span class="badge bg-warning"#}
{#                                                            style="font-size: 1.2rem">风向</span>#}
{#                                                      <div class="d-flex flex-column align-items-center mt-2">#}
{#                                                          <div class="d-flex align-items-baseline">#}
{#                                                              <span id="wind_direction" class="h2 mb-0">0</span>#}
{#                                                              <span class="h4 mb-0 ml-1">°</span>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="col-md-9">#}
{#                                                  <div class="param-grid">#}
{#                                                      <div class="param-item">#}
{#                                                          <i class="fas fa-wind param-icon"></i>#}
{#                                                          <span class="param-label">风速</span>#}
{#                                                          <span id="wind_speed" class="param-value"></span>#}
{#                                                          <span class="param-unit">m/s</span>#}
{#                                                      </div>#}
{#                                                      <div class="param-item">#}
{#                                                          <i class="fas fa-tachometer-alt param-icon"></i>#}
{#                                                          <span class="param-label">气压</span>#}
{#                                                          <span id="air_pressure" class="param-value"></span>#}
{#                                                          <span class="param-unit">hPa</span>#}
{#                                                      </div>#}
{#                                                      <div class="param-item">#}
{#                                                          <i class="fas fa-eye param-icon"></i>#}
{#                                                          <span class="param-label">能见度</span>#}
{#                                                          <span id="visibility" class="param-value"></span>#}
{#                                                          <span class="param-unit">km</span>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                                  <div class="timestamp-label mt-3">#}
{#                                                      最后更新：<span id="wind-timestamp"></span>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{##}
{#                          <!-- 第三行：辐射监测 -->#}
{#                          <div class="row mb-4">#}
{#                              <div class="col-md-8">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                         <h5 style="font-size:1.4rem;color:#ffd700"><i#}
{#                                                  class="fas fa-satellite-dish mr-2"></i>辐射监测</h5>#}
{#                                          <div class="radiation-grid">#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          太阳下行 <span id="swd-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="swdProgress"#}
{#                                                               class="progress-bar bg-warning progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          太阳上行 <span id="swu-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="swuProgress"#}
{#                                                               class="progress-bar bg-danger progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          长波下行 <span id="lwd-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="lwdProgress"#}
{#                                                               class="progress-bar bg-orange progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          长波上行 <span id="lwu-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="lwuProgress"#}
{#                                                               class="progress-bar bg-purple progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                          <div class="timestamp-label mt-2">#}
{#                                              更新时间：<span id="radiation-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 电压历史图表 -->#}
{#                              <div class="col-md-4">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <h5 style="font-size:1.4rem;color:#00ff00"><i#}
{#                                                  class="fas fa-chart-line mr-2"></i>电压历史</h5>#}
{#                                          <div id="voltageHistoryChart" style="height:260px"></div>#}
{#                                          <div class="timestamp-label mt-2" style="color:#fff">#}
{#                                              最后更新：<span id="voltage-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{##}
{#                          <!-- 第四行：降水与积雪 -->#}
{#                          <div class="row">#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <div class="precipitation-box">#}
{#                                              <i class="fas fa-cloud-rain fa-3x text-primary"></i>#}
{#                                              <div class="precipitation-info">#}
{#                                                  <div class="precipitation-value">#}
{#                                                      <span id="precipitation"></span>#}
{#                                                      <span class="unit">mm</span>#}
{#                                                  </div>#}
{#                                                  <div class="precipitation-label">降水量</div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <div class="snow-box">#}
{#                                              <i class="fas fa-snowflake fa-3x text-info"></i>#}
{#                                              <div class="snow-info">#}
{#                                                  <div class="snow-value">#}
{#                                                      <span id="sd"></span>#}
{#                                                      <span class="unit">cm</span>#}
{#                                                  </div>#}
{#                                                  <div class="snow-label">雪深</div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{#                      </div>#}
{#                  </div>#}
{#              </div>#}
{#          </div>#}

        <!-- 异常检测块 -->
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">重力波图像质量受气象条件影响</h5>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card card-info">
                      <div>
                        <img  id="newest-detect-img" class="col-md-12">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ./card-body -->
              <div class="card-footer">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card card-info card-outline">
                      <div class="card-header">
                        <h3 class="card-title">重力波图像质量受气象条件影响指数曲线</h3>
                      </div>
                      <div class="card-body">
                        <div class="chart">
                            <div class="col-md-12" style="background-color: #1a2333">
                                <canvas id="myChart" style="width: 250px; height: 50px"></canvas>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
                <!-- /.row -->
            </div>
              <!-- /.card-footer -->
          </div>
            <!-- /.card -->
        </div>

        <!-- 反演温度对比曲线块 -->
        <div class="row">
{#          <div class="col-md-2">#}
{#            <div class="card card-outline">#}
{#              <div class="card-header">#}
{#                <h3 class="card-title">#}
{#                  重力波图像#}
{#                </h3>#}
{#              </div>#}
{#              <div class="card-body">#}
{#                <img class="col-md-12" id="newest-spectrogram-img">#}
{#              </div>#}
{#            </div>#}
{#          </div>#}
          <div class="col-md-12">
            <div class="card card-outline">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="far fa-chart-bar"></i>
                  反演温度折线图(单位：K，开尔文温度)
                </h3>
              </div>
              <div class="card-body">
                    <div id="line-Chart" style="height: 300px; background-color: #0d1117"></div>
              </div>
            </div>
          </div>
{#            <div class="col-md-10">#}
{#                        <!-- AREA CHART -->#}
{#                        <div class="card card-primary">#}
{#                            <div class="card-header">#}
{#                                <h3 class="card-title">反演温度折线图(单位：K，开尔文温度)</h3>#}
{##}
{#                                <div class="card-tools">#}
{#                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">#}
{#                                        <label class="btn btn-secondary">#}
{#                                            <input type="radio" name="options1" value="on" id="option_a1" autocomplete="off" checked>ON#}
{#                                        </label>#}
{#                                        <label class="btn btn-secondary">#}
{#                                            <input type="radio" name="options1" value="off" id="option_a2" autocomplete="off" >OFF#}
{#                                        </label>#}
{#                                    </div>#}
{#                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">#}
{#                                        <i class="fas fa-minus"></i>#}
{#                                    </button>#}
{#                                    <button type="button" class="btn btn-tool" data-card-widget="remove">#}
{#                                        <i class="fas fa-times"></i>#}
{#                                    </button>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="card-body">#}
{#                                <div id = "first_sensor_temperature_chart" style="height:400px;"></div>#}
{#                            </div>#}
{#                            <!-- /.card-body -->#}
{#                        </div>#}
{#                        <!-- /.card -->#}
{#            </div>#}
        </div>


        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">预测图像生成</h5>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card card-info">
                      <div>
                        <img  id="newest-sum-img" class="col-md-4">
                        <img  id="newest-generation-img" class="col-md-3">
                        <img  id="newest-generation-BG-img" class="col-md-4">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
              <!-- /.card-footer -->
          </div>
            <!-- /.card -->
        </div>

        <!-- 历史数据统计 -->
        <div class="row">
          <!-- Left col -->
          <div class="col-md-12">
            <!-- TABLE: LATEST ORDERS -->
            <div class="card">
              <div class="card-header border-transparent">
                <h3 class="card-title">历史数据</h3>
              </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp0"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report0"></div>
                    </div>
                </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp1"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report1"></div>
                    </div>
                </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp2"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report2"></div>
                    </div>
                </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp3"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report3"></div>
                    </div>
                </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp4"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report4"></div>
                    </div>
                </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp5"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report5"></div>
                    </div>
                </div>
                <div class="col-md-12" style="height: auto !important;">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title" id="timetamp6"></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="display: block;" id="report6"></div>
                    </div>
                </div>
              <!-- /.card-header -->
{#              <div class="card-body p-0">#}
{#                <div class="table-responsive">#}
{#                  <table class="table m-0">#}
{#                    <thead>#}
{#                    <tr>#}
{#                      <th>时间</th>#}
{#                      <th>编号</th>#}
{#                      <th>状态</th>#}
{#                      <th>结果报告</th>#}
{#                    </tr>#}
{#                    </thead>#}
{#                    <tbody>#}
{#                    <tr>#}
{#                      <td id="timetamp0"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report0"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp1"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report1"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp2"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report2"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp3"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report3"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp4"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report4"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp5"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report5"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp6"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report6"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    </tbody>#}
{#                  </table>#}
{#                </div>#}
{#                <!-- /.table-responsive -->#}
{#              </div>#}
              <!-- /.card-body -->
{#              <div class="card-footer clearfix">#}
{#                <a href="javascript:void(0)" class="btn btn-sm btn-info float-left">下新订单</a>#}
{#                <a href="javascript:void(0)" class="btn btn-sm btn-secondary float-right">查看所有订单</a>#}
{#              </div>#}
              <!-- /.card-footer -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->

    </div>

      </div>
    </section>
  </div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- 控制侧边栏内容在这里 -->
  </aside>
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
  <!--<footer class="main-footer">
    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
    保留所有权利。
    <div class="float-right d-none d-sm-inline-block">
      <b>版本</b> 3.2.0
    </div>
  </footer>-->
</div>
<!-- ./wrapper -->

<!-- 载入脚本 -->
<!-- jQuery -->
<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="../static/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="../static/plugins/raphael/raphael.min.js"></script>
<script src="../static/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="../static/plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>

<!-- 用于演示 AdminLTE  -->
<script src="../static/js/demo.js"></script>
<!-- AdminLTE 仪表盘演示（仅用于演示） -->
{#<script src="../static/js/pages/dashboard2.js"></script>#}


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<!-- AdminLTE App -->
<script src="../static/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="../static/plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE 插件 - 允许在调整窗口大小时重新绘制图表 -->
<script src="../static/plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE 插件 - 也用于绘制环形图 -->
<script src="../static/plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- uPlot -->
<script src="../static/plugins/uplot/uPlot.iife.min.js"></script>

<script src="../static/plugins/echart/echart.js"></script>

{#时间格式化#}
<script>
    function formatDateTime (date) {
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = date.getMinutes();
        let second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0'+second):second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;

    };
</script>

{#<!-- 传感器数据表格 -->#}
{#<script>#}
{#    let firstSensorTime;#}
{#    let secondSensorTime;#}
{#    let noiseSensorTime;#}
{#    let firstSensorFirstTemperature;#}
{#    let firstSensorSecondTemperature;#}
{#    let firstSensorHumidity;#}
{#    let secondSensorFirstTemperature;#}
{#    let secondSensorSecondTemperature;#}
{#    let secondSensorFirstHumidity;#}
{#    let secondSensorSecondHumidity;#}
{#    let noise;#}
{#    function loadSensorData() {#}
{#        $.ajax({#}
{#            type: "post",#}
{#            async: true,#}
{#            url: "/api/findCurrentTemperature",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data));#}
{#                map = map.get("0")#}
                {#console.log(map)#}
{#                let date = new Date(Date.parse(map.detection_time));#}
{#                firstSensorTime = formatDateTime(date);#}
{#                firstSensorFirstTemperature = map.first_temperature;#}
{#                firstSensorSecondTemperature = map.second_temperature;#}
{#                firstSensorHumidity = map.humidity;#}
{##}
{#                // 更新相关的 DOM#}
{#                document.getElementById("sensortime1").innerText = firstSensorTime;#}
{#                document.getElementById("sensortime2").innerText = firstSensorTime;#}
{#                document.getElementById("sensortime3").innerText = firstSensorTime;#}
{#                document.getElementById("sensordata1").innerText = firstSensorFirstTemperature + '℃';#}
{#                document.getElementById("sensordata2").innerText = firstSensorSecondTemperature + '℃';#}
{#                document.getElementById("sensordata3").innerText = firstSensorHumidity + '%';#}
{#                document.getElementById("sensorline1").style.width = firstSensorFirstTemperature + '%';#}
{#                document.getElementById("sensorline2").style.width = firstSensorSecondTemperature + '%';#}
{#                document.getElementById("sensorline3").style.width = firstSensorHumidity + '%';#}
{##}
{#                // 更新图表#}
{#                updateFirstSensorCharts();#}
{#            }#}
{#        });#}
{##}
{#        $.ajax({#}
{#            type: "post",#}
{#            async: true,#}
{#            url: "/api/findCurrentNoise",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data));#}
{#                map = map.get("0")#}
{#                console.log(map)#}
{#                let date = new Date(Date.parse(map.detection_time));#}
{#                noiseSensorTime = formatDateTime(date);#}
{#                noise = map.noise;#}
{##}
{#                // 更新相关的 DOM#}
{#                document.getElementById("sensortime4").innerText = noiseSensorTime;#}
{#                document.getElementById("sensordata4").innerText = noise + 'dB';#}
{#                document.getElementById("sensorline4").style.width = noise + '%';#}
{##}
{##}
{#                // 更新图表#}
{#                updateNoiseChart();#}
{#            }#}
{#        });#}
{#    }#}
{##}
{#    // 更新第一个传感器图表#}
{#    function updateFirstSensorCharts() {#}
{#        let fsftc_chartDom = document.getElementById('first_sensor_first_temperature_chart');#}
{#        let fsftc_myChart = echarts.init(fsftc_chartDom);#}
{#        let fsftc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}℃'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '温度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: -30,#}
{#                    max: 30,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorFirstTemperature,#}
{#                            name: '温度 (℃)'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{##}
{#        fsftc_option && fsftc_myChart.setOption(fsftc_option);#}
{##}
{#        // 第二个温度仪表盘#}
{#        let fsstc_chartDom = document.getElementById('first_sensor_second_temperature_chart');#}
{#        let fsstc_myChart = echarts.init(fsstc_chartDom);#}
{#        let fsstc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}℃'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '温度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: -30,#}
{#                    max: 30,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorSecondTemperature,#}
{#                            name: '温度 (℃)'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{##}
{#        fsstc_option && fsstc_myChart.setOption(fsstc_option);#}
{##}
{#        // 湿度仪表盘#}
{#        let fshc_chartDom = document.getElementById('first_sensor_humidity');#}
{#        let fshc_myChart = echarts.init(fshc_chartDom);#}
{#        let fshc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}%'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '相对湿度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: 0,#}
{#                    max: 100,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorHumidity,#}
{#                            name: '相对湿度（%）'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{#        fshc_option && fshc_myChart.setOption(fshc_option);#}
{#    }#}
{##}
{#    // 噪声传感器图表更新#}
{#    function updateNoiseChart() {#}
{#        let nc_chartDom = document.getElementById('noise_chart');#}
{#        let nc_myChart = echarts.init(nc_chartDom);#}
{#        let nc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}db'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '噪声',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: 0,#}
{#                    max: 100,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: noise,#}
{#                            name: '噪声 （db）'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{#        nc_option && nc_myChart.setOption(nc_option);#}
{#    }#}
{##}
{#    $(function () {#}
{#        loadSensorData()#}
{#        setInterval(loadSensorData, 5000)#}
{#    })#}
{#</script>#}

{#<!-- 仪表盘 -->#}
{#<script>#}
{#    let firstSensorTime;#}
{#    let secondSensorTime;#}
{#    let noiseSensorTime;#}
{#    let firstSensorFirstTemperature;#}
{#    let firstSensorSecondTemperature;#}
{#    let firstSensorHumidity;#}
{#    let secondSensorFirstTemperature;#}
{#    let secondSensorSecondTemperature;#}
{#    let secondSensorFirstHumidity;#}
{#    let secondSensorSecondHumidity;#}
{#    let noise;#}
{#    function loadSensorData() {#}
{#        $.ajax({#}
{#            type: "post",#}
{#            async: true,#}
{#            url: "/api/findCurrentTemperature",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data));#}
{#                map = map.get("0")#}
                {#console.log(map)#}
{#                let date = new Date(Date.parse(map.detection_time));#}
{#                firstSensorTime = formatDateTime(date);#}
{#                firstSensorFirstTemperature = map.first_temperature;#}
{#                firstSensorSecondTemperature = map.second_temperature;#}
{#                firstSensorHumidity = map.humidity;#}
{##}
{#                // 更新相关的 DOM#}
{#                document.getElementById("first_sensor_time1").innerText = firstSensorTime;#}
{#                document.getElementById("first_sensor_time2").innerText = firstSensorTime;#}
{#                document.getElementById("first_sensor_time3").innerText = firstSensorTime;#}
{##}
{#                // 更新图表#}
{#                updateFirstSensorCharts();#}
{#            }#}
{#        });#}
{##}
{#        $.ajax({#}
{#            type: "post",#}
{#            async: true,#}
{#            url: "/api/findCurrentNoise",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data));#}
{#                map = map.get("0")#}
{#                console.log(map)#}
{#                let date = new Date(Date.parse(map.detection_time));#}
{#                noiseSensorTime = formatDateTime(date);#}
{#                noise = map.noise;#}
{##}
{#                // 更新相关的 DOM#}
{#                document.getElementById("noise_sensor_time").innerText = noiseSensorTime;#}
{##}
{#                // 更新图表#}
{#                updateNoiseChart();#}
{#            }#}
{#        });#}
{#    }#}
{##}
{#    // 更新第一个传感器图表#}
{#    function updateFirstSensorCharts() {#}
{#        let fsftc_chartDom = document.getElementById('first_sensor_first_temperature_chart');#}
{#        let fsftc_myChart = echarts.init(fsftc_chartDom);#}
{#        let fsftc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}℃'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '温度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: -30,#}
{#                    max: 30,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorFirstTemperature,#}
{#                            name: '温度 (℃)'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{##}
{#        fsftc_option && fsftc_myChart.setOption(fsftc_option);#}
{##}
{#        // 第二个温度仪表盘#}
{#        let fsstc_chartDom = document.getElementById('first_sensor_second_temperature_chart');#}
{#        let fsstc_myChart = echarts.init(fsstc_chartDom);#}
{#        let fsstc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}℃'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '温度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: -30,#}
{#                    max: 30,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorSecondTemperature,#}
{#                            name: '温度 (℃)'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{##}
{#        fsstc_option && fsstc_myChart.setOption(fsstc_option);#}
{##}
{#        // 湿度仪表盘#}
{#        let fshc_chartDom = document.getElementById('first_sensor_humidity');#}
{#        let fshc_myChart = echarts.init(fshc_chartDom);#}
{#        let fshc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}%'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '相对湿度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: 0,#}
{#                    max: 100,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorHumidity,#}
{#                            name: '相对湿度（%）'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{#        fshc_option && fshc_myChart.setOption(fshc_option);#}
{#    }#}
{##}
{#    // 噪声传感器图表更新#}
{#    function updateNoiseChart() {#}
{#        let nc_chartDom = document.getElementById('noise_chart');#}
{#        let nc_myChart = echarts.init(nc_chartDom);#}
{#        let nc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}db'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '噪声',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: 0,#}
{#                    max: 100,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: noise,#}
{#                            name: '噪声 （db）'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{#        nc_option && nc_myChart.setOption(nc_option);#}
{#    }#}
{##}
{#    $(function () {#}
{#        loadSensorData()#}
{#        setInterval(loadSensorData, 5000)#}
{#    })#}
{#</script>#}

<script>

    {#// 初始化图表#}
    {#function initCharts() {#}
    {#    // 温度仪表盘#}
    {#    window.externalTempGauge = echarts.init(document.getElementById('externalTempGauge'));#}
    {#    window.surfaceTempGauge = echarts.init(document.getElementById('surfaceTempGauge'));#}
    {#    window.humidityChart = echarts.init(document.getElementById('humidityChart'));#}
    {#    window.voltageHistoryChart = echarts.init(document.getElementById('voltageHistoryChart'));#}
    {##}
    {#    // 温度仪表盘通用配置#}
    {#    const tempGaugeOption = {#}
    {#        series: [{#}
    {#            type: 'gauge',#}
    {#            min: -60,#}
    {#            max: 60,#}
    {#            axisLine: {#}
    {#                lineStyle: {#}
    {#                    color: [[0.3, '#4dabf7'], [0.7, '#69db7c'], [1, '#ff6b6b']],#}
    {#                    width: 20#}
    {#                }#}
    {#            },#}
    {#            detail: {#}
    {#                formatter: '{value}°C',#}
    {#                fontSize: 24,#}
    {#                color: '#fff'#}
    {#            },#}
    {#            pointer: {show: true}#}
    {#        }]#}
    {#    };#}
    {##}
    {#    // 初始化仪表盘#}
    {#    externalTempGauge.setOption(tempGaugeOption);#}
    {#    surfaceTempGauge.setOption(tempGaugeOption);#}
    {##}
    {#    // 湿度环形图#}
    {#    humidityChart.setOption({#}
    {#        series: [{#}
    {#            type: 'pie',#}
    {#            radius: ['60%', '80%'],#}
    {#            label: {#}
    {#                show: true,#}
    {#                position: 'center',#}
    {#                fontSize: 24,#}
    {#                color: '#fff',#}
    {#                formatter: '{d}%'#}
    {#            },#}
    {#            data: [{value: 0}, {value: 100}]#}
    {#        }]#}
    {#    });#}
    {##}
    {#    // 电压历史图表#}
    {#    voltageHistoryChart.setOption({#}
    {#        xAxis: {#}
    {#            type: 'category',#}
    {#            data: [],#}
    {#            axisLabel: {#}
    {#                color: '#fff',#}
    {#                fontSize: 12,#}
    {#                rotate: -45#}
    {#            }#}
    {#        },#}
    {#        yAxis: {#}
    {#            name: '电压(V)',#}
    {#            nameTextStyle: {#}
    {#                color: '#fff',#}
    {#                fontSize: 14#}
    {#            },#}
    {#            axisLabel: {#}
    {#                color: '#fff',#}
    {#                fontSize: 12#}
    {#            }#}
    {#        },#}
    {#        series: [{#}
    {#            type: 'line',#}
    {#            smooth: true,#}
    {#            symbol: 'circle',#}
    {#            symbolSize: 8,#}
    {#            itemStyle: {#}
    {#                color: '#69db7c'#}
    {#            },#}
    {#            lineStyle: {#}
    {#                width: 3#}
    {#            },#}
    {#            areaStyle: {#}
    {#                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [#}
    {#                    {offset: 0, color: 'rgba(105,219,124,0.8)'},#}
    {#                    {offset: 1, color: 'rgba(105,219,124,0.1)'}#}
    {#                ])#}
    {#            }#}
    {#        }]#}
    {#    });#}

    // 数据传输
    let timetamp_list = []
    let detect_image_list = []
    let detect_label_list = []
    let detect_score_list = []
    let spectrogram8_list = []
    let anoinv_score_list = []
    let inversion_score_list = []
    let generation_image_list = []
    let generation_BG_image_list = []
    let sum_image_list = []
    let report_list = []

    {#timestamp日期格式化#}
    function formatTimestamp(timestamp) {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    function loadData()
    {
        $.ajax({
        type: "post",
        async: false,
        url: "/api/data",
        success: function (data) {
            for (let i = 0; i < data.length; i++) {
                let map = new Map(Object.entries(data[i]));
                console.log(map)
                let time = new Date(Date.parse(map.get("timetamp")))
                {#timetamp_list.push(formatDateTime(time))#}
                timetamp_list.push(formatTimestamp(map.get("timetamp")))
                detect_image_list.push(map.get("detect_image"))
                detect_label_list.push(map.get("detect_label"))
                detect_score_list.push(map.get("detect_score"))
                spectrogram8_list.push(map.get("spectrogram8"))

                anoinv_score_list.push(map.get("anoinv_score"))
                inversion_score_list.push(map.get("inversion_score"))
                generation_image_list.push(map.get("generation_image"))
                generation_BG_image_list.push(map.get("generation_BG_image"))
                sum_image_list.push(map.get("sum_image"))
                report_list.push(map.get("report"))
                console.log(detect_score_list[3])
            }

            document.getElementById("newest-detect-img").src = `${detect_image_list[1]}`;
            {#document.getElementById("newest-spectrogram-img").src = `${spectrogram8_list[1]}`;#}
            {#document.getElementById("newest-generation-img").src = `static\\generation_results\\spectrogram\\2018_10_02\\generation_image_Image_12.jpg`;#}
            {#document.getElementById("newest-generation-BG-img").src = `static/generation_results/BG_image/BG_dark_1.png`;#}
            {#document.getElementById("newest-sum-img").src = `static\\generation_results\\summarize\\2018_10_02\\sum_image_Image_10.png`;#}
            document.getElementById("newest-generation-img").src = `${generation_image_list[1]}`;
            document.getElementById("newest-generation-BG-img").src = `${generation_BG_image_list[1]}`;
            document.getElementById("newest-sum-img").src = `${sum_image_list[1]}`;
            console.log(generation_image_list[1]);
            {#console.log(generation_BG_image_list[0]);#}
        }
        })

        {#$.ajax({#}
        {#    type: "post",#}
        {#    url: "/api/new_data",#}
        {#    success: function (data) {#}
        {#        let map = new Map(Object.entries(data[0]));#}
        {#        let timestamp = formatDateTime(new Date(map.get("timetamp")));#}
        {#        let timestamp = map.get("timetamp");#}
        {##}
        {#        // 更新时间戳#}
        {#        $('#global-timestamp').text(timestamp);#}
        {##}
        {#        // 更新温度仪表盘#}
        {#        externalTempGauge.setOption({series: [{data: [{value: map.get("temperature")}]}]});#}
        {#        surfaceTempGauge.setOption({series: [{data: [{value: map.get("ts")}]}]});#}
        {#        $('#temp-timestamp').text(timestamp);#}
        {#        $('#ts-timestamp').text(timestamp);#}
        {##}
        {#        // 更新湿度图表#}
        {#        humidityChart.setOption({#}
        {#            series: [{#}
        {#                data: [#}
        {#                    {value: map.get("humidity"), name: '当前湿度'},#}
        {#                    {value: 100 - map.get("humidity")}#}
        {#                ]#}
        {#            }]#}
        {#        });#}
        {#        $('#humidity-value').text(map.get("humidity"));#}
        {#        $('#humidity-timestamp').text(timestamp);#}
        {##}
        {#        // 更新风参数#}
        {#        $('#wind_speed').text(map.get("wind_speed"));#}
        {#        const windDir = map.get("wind_direction") || 0;#}
        {#        $('#wind_direction').text(windDir);#}
        {#        $('#air_pressure').text(map.get("air_pressure"));#}
        {#        $('#visibility').text(map.get("visibility"));#}
        {#        $('#wind-timestamp').text(timestamp);#}
        {##}
        {#        // 更新辐射数据#}
        {#        $('#swd-value').text(map.get("swd"));#}
        {#        $('#swu-value').text(map.get("swu"));#}
        {#        $('#lwd-value').text(map.get("lwd"));#}
        {#        $('#lwu-value').text(map.get("lwu"));#}
        {#        $('#radiation-timestamp').text(timestamp);#}
        {##}
        {#        // 更新辐射进度条#}
        {#        $('#swdProgress').css('width', `${map.get("swd") / 200 * 100}%`);#}
        {#        $('#swuProgress').css('width', `${map.get("swu") / 200 * 100}%`);#}
        {#        $('#lwdProgress').css('width', `${map.get("lwd") / 200 * 100}%`); // 新增长波上行#}
        {#        $('#lwuProgress').css('width', `${map.get("lwu") / 200 * 100}%`); // 新增长波下行#}
        {##}
        {#        // 更新电压历史,待修改#}
        {#        $.ajax({#}
        {#            type: "post",#}
        {#            url: "/api/voltage_history",#}
        {#            success: function (historyData) {#}
        {#                const voltages = historyData.map(d => d.bv);#}
        {#                const times = historyData.map(d => {#}
        {#                    const date = new Date(d.timetamp);#}
        {#                    return `${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;#}
        {#                }).reverse();#}
        {##}
        {#                voltageHistoryChart.setOption({#}
        {#                    xAxis: {data: times},#}
        {#                    series: [{data: voltages}]#}
        {#                });#}
        {#                $('#voltage-timestamp').text(timestamp);#}
        {#            }#}
        {#        });#}
        {##}
        {#        // 更新降水积雪#}
        {#        $('#precipitation').text(map.get("precipitation"));#}
        {#        $('#sd').text(map.get("sd"));#}
        {##}
        {#        // 更新风向指针#}
        {#        const arrow = document.getElementById('windArrow');#}
        {#        if (arrow) {#}
        {#            arrow.style.transform = `rotate(${windDir}deg)`;#}
        {#        }#}
        {#    }#}
    }

    $(function () {
        {#initCharts()#}
        loadData()
        setInterval(loadData, 5000)
    })


    $(function () {
        document.getElementById("timetamp0").innerText = `${timetamp_list[1]}`
        document.getElementById("timetamp1").innerText = `${timetamp_list[2]}`
        document.getElementById("timetamp2").innerText = `${timetamp_list[3]}`
        document.getElementById("timetamp3").innerText = `${timetamp_list[4]}`
        document.getElementById("timetamp4").innerText = `${timetamp_list[5]}`
        document.getElementById("timetamp5").innerText = `${timetamp_list[6]}`
        document.getElementById("timetamp6").innerText = `${timetamp_list[7]}`
        document.getElementById("report0").innerText = `${report_list[1]}`
        document.getElementById("report1").innerText = `${report_list[2]}`
        document.getElementById("report2").innerText = `${report_list[3]}`
        document.getElementById("report3").innerText = `${report_list[4]}`
        document.getElementById("report4").innerText = `${report_list[5]}`
        document.getElementById("report5").innerText = `${report_list[6]}`
        document.getElementById("report6").innerText = `${report_list[7]}`
    })


    $(function () {
        // 反演温度折线图
        var chartDom = document.getElementById('line-Chart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            backgroundColor: 'rgba(44,51,66,0.9)',  // 深空灰透明背景
            xAxis: {
                axisLabel: {
                    color: '#bdbdbd',
                    fontSize: 12,
                    fontWeight: 'bold'
                },
                axisLine: {
                    lineStyle: {
                        color: '#404854',
                        width: 2
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(64, 72, 84, 0.3)',
                        type: 'dashed'
                    }
                },
                type: 'category',
                data: [timetamp_list[8], timetamp_list[7], timetamp_list[6], timetamp_list[5], timetamp_list[4], timetamp_list[3], timetamp_list[2], timetamp_list[1]]
            },
            yAxis: {
                axisLabel: {
                    color: '#bdbdbd',
                    fontSize: 12,
                    fontWeight: 'bold'
                },
                axisLine: {
                    lineStyle: {
                        color: '#404854',
                        width: 2
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(64, 72, 84, 0.3)',
                        type: 'dashed'
                    }
                },
                type: 'value'
            },
            series: [
                {
                    lineStyle: {
                        color: '#00e6b2',  // 荧光青
                        width: 2.5,
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 230, 178, 0.3)'
                    },
                    itemStyle: {
                        color: 'rgba(0, 230, 178, 0.8)',
                        borderWidth: 2
                    },
                    data: [anoinv_score_list[8], anoinv_score_list[7], anoinv_score_list[6], anoinv_score_list[5], anoinv_score_list[4], anoinv_score_list[3], anoinv_score_list[2], anoinv_score_list[1]],
                    type: 'line',
                    smooth: false
                },
                {
                    lineStyle: {
                        color: '#ff44aa',  // 霓虹品红
                        width: 2.5,
                        shadowBlur: 10,
                        shadowColor: 'rgba(255, 68, 170, 0.3)'
                    },
                    itemStyle: {
                        color: 'rgba(255, 68, 170, 0.8)',
                        borderWidth: 2
                    },
                    data: [inversion_score_list[8], inversion_score_list[7], inversion_score_list[6], inversion_score_list[5], inversion_score_list[4], inversion_score_list[3], inversion_score_list[2], inversion_score_list[1]],
                    type: 'line',
                    smooth: false
                }
            ]
        };

        option && myChart.setOption(option);

        $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
            position: 'absolute',
            display: 'none',
            opacity: 0.8
        }).appendTo('body')
        $('#line-chart').bind('plothover', function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2)

                $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)
                    .css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                    })
                    .fadeIn(200)
            } else {
                $('#line-chart-tooltip').hide()
            }
        })

        setInterval(myChart.setOption(option), 1000);
    })


    $(function () {
        {#console.log(detect_score_list[0])#}
        // 受干扰影响曲线图
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [timetamp_list[8], timetamp_list[7], timetamp_list[6], timetamp_list[5], timetamp_list[4], timetamp_list[3], timetamp_list[2], timetamp_list[1]],
                {#labels: [timetamp_list[3], timetamp_list[2], timetamp_list[1], timetamp_list[0]],#}
                datasets: [{
                    label: '图像质量受气象条件影响指数',
                    {#data: [detect_score_list[3], detect_score_list[2], detect_score_list[1], detect_score_list[0]],#}
                    data: [detect_score_list[8], detect_score_list[7], detect_score_list[6], detect_score_list[5], detect_score_list[4], detect_score_list[3], detect_score_list[2], detect_score_list[1]],
                    backgroundColor: 'rgba(0, 255, 255, 0.1)',  // 霓虹青透明填充
                    pointBackgroundColor: 'rgba(0, 255, 255, 0.8)',
                    borderColor: '#9a76fc',  // 霓                    {#backgroundColor: 'rgba(255, 255, 255, 1)',#}
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                {#backgroundColor: 'rgba(255, 255, 255, 1)',#}
                plugins: {
                    legend: {
                        labels: {
                            color: '#8f9dba',  // 科技蓝灰文字
                            font: {size: 14}
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#8f9dba',
                            font: {weight: 'bold'}
                        },
                        grid: {
                            color: 'rgba(143, 157, 186, 0.15)',
                            borderDash: [5, 5]
                        }
                    },
                    y: {
                        ticks: {
                            color: '#8f9dba',
                            font: {weight: 'bold'}
                        },
                        grid: {
                            color: 'rgba(143, 157, 186, 0.2)',
                            borderDash: [3, 3]
                        },
                        beginAtZero: true
                    }
                },
                elements: {
                    line: {
                        tension: 0.4,
                        borderWidth: 2
                    }
                },
            }
        })
        $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
            position: 'absolute',
            display: 'none',
            opacity: 0.8
        }).appendTo('body')
        $('#line-chart').bind('plothover', function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2)

                $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)
                    .css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                    })
                    .fadeIn(200)
            } else {
                $('#line-chart-tooltip').hide()
            }
        })
    })

</script>
<style>
/* 自定义样式 */
.timestamp-label { color: #6c757d; font-size: 1.2rem; }
.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.param-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
.param-value { font-size: 1.2rem; font-weight: bold; }
.radiation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.progress-container { margin-bottom: 15px; }
.progress-label { color: #fff; margin-bottom: 5px; }
.precipitation-box, .snow-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.precipitation-info, .snow-info { flex-grow: 1; }
.precipitation-value, .snow-value {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}
.wind-dial-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.wind-direction-arrow {
    position: absolute;
    width: 2.5px;
    height: 80%;
    background: #ffd700;
    left: 50%;
    transform-origin: bottom;
    transition: transform 0.5s ease;
}
/* 风向数值居中 */
.wind-info {
    text-align: center;
}
.wind-info #wind_direction {
    font-size: 1.5rem;
    line-height: 1.2;
}

/* 参数标题放大 */
.param-label {
    font-size: 1.2rem !important;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: #fff;
}
.param-value {
    font-size: 1.2rem;
    font-weight: bold;
}
.param-unit {
    font-size: 1.2rem;
    margin-left: 4px;
}
.param-icon {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
</style>
</body>
</html>
